<template>
  <div class="page">
    <DynamicForm
      v-show="showSearch"
      ref="queryRef"
      v-model="queryParams"
      :config="formConfig"
      :items="formItems"
      :inline="true"
      :dict-data="{ case_source }"
      @submit="handleQuery"
      @reset="resetQuery">
      <template #dateRange="{ formData }">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 18vw" />
      </template>
    </DynamicForm>
    <el-row :gutter="10" class="mb10">
      <el-col :span="1.5">
        <el-button
          :disabled="Object.keys(selectedRows).length === 0"
          type="warning"
          plain
          icon="Download"
          @click="handleExport(1)"
          v-hasPermi="['system:user:add']">
          导出授权委托书
        </el-button>
        <el-button
          :disabled="Object.keys(selectedRows).length === 0"
          type="warning"
          plain
          icon="Download"
          @click="handleExport(1)"
          v-hasPermi="['system:user:add']">
          导出送达信息确认书
        </el-button>
        <el-button
          :disabled="Object.keys(selectedRows).length === 0"
          type="warning"
          plain
          icon="Download"
          @click="handleExport(1)"
          v-hasPermi="['system:user:add']">
          导出立案审批表
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>
    <Table
      v-loading="loading"
      :data="tableData"
      :columns="newColumns"
      :dictData="{ case_source }"
      highlight-current-row
      @current-change="handleSelectionChange"
      border>
      <template #index="{ $index }">
        {{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + $index + 1 }}
      </template>
      <template #action="{ row }">
        <el-button link type="primary" @click="handleEdit(row)">查看</el-button>
        <el-button link type="primary" @click="handleUpload(row)">上传附件</el-button>
        <el-button link type="primary" @click="handlePreview(row)">预览</el-button>
      </template>
    </Table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList" />
    <!-- 上传附件弹窗 -->
    <el-dialog title="上传附件" v-model="fileModal" width="500px">
      <FileUpload v-model="fileUploadList" @change="handleFileChange" />
      <template #footer>
        <div class="form-footer">
          <el-button type="primary" @click="handleUploadConfirm">保存</el-button>
          <el-button @click="() => (fileModal = false)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import DynamicForm from '@/components/DynamicForm/index.vue'
import Table from '@/components/Table'

import { pageConfig } from './config'

const router = useRouter()

const { proxy } = getCurrentInstance()
const { case_source } = proxy.useDict('case_source')

const showSearch = ref(true)

const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
})
const { formConfig, formItems, columns, newColumns } = pageConfig()
const dateRange = ref([])

// 查询
const handleQuery = () => {
  getList()
}

// 重置
const resetQuery = () => {
  dateRange.value = null
  getList()
}

// 导出
const handleExport = type => {
  console.log('导出类型', type)
}
// 表格相关 start =============================================
// 获取列表
// 选择行
const selectedRows = ref<any>({})
// 选择行变化
const handleSelectionChange = val => {
  console.log('选择行', val)
  selectedRows.value = val
}
const getList = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = [
      {
        field1: '1',
        userName: '1',
        field2: '1',
        field3: '1',
        field4: '1',
        dateRange: '1',
      },
    ]
    total.value = 1
    loading.value = false
  }, 1000)
}
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
// 查看
const handleEdit = row => {
  console.log('查看', row)
  router.push({
    path: '/workbench/filingReview/registerDetail',
    query: {
      id: row.id,
      type: 'view',
      pageType: 'complete',
    },
  })
}
// 预览
const handlePreview = row => {
  console.log('预览案件', row)
}

// 上传附件
const fileModal = ref(false)
const fileUploadList = ref([])
const handleUpload = row => {
  console.log('上传附件', row)
  fileModal.value = true
}
// 文件变化处理
const handleFileChange = (files: any[]) => {}
// 上传附件
const handleUploadConfirm = async () => {
  console.log('上传附件', fileUploadList.value)
}
// 表格相关 end =============================================

onMounted(() => {
  getList()
})
</script>

<style scoped></style>
